<template>
	<view class="beijing1" style="position: relative">
		<image src="/pagesB/static/mingxibei.png" mode="" style="position: absolute; z-index: 0; top: 0; width: 100%; height: 510rpx"></image>
		<view class="" id="ggo">
			<u-navbar
				:placeholder="true"
				title="支付明细"
				:autoBack="false"
				bg-color="transparent"
				left-icon-color="#ffffff"
				:title-style="{ color: '#ffffff' }"
				@leftClick="leftClick"
			></u-navbar>

			<view class="flex" style="padding: 25rpx; position: relative" v-if="time">
				<view class="" style="font-weight: 400; font-size: 36rpx; color: #ffffff">剩余支付时间：</view>
				<u-count-down :time="time" format="HH:mm:ss" @finish="jie"></u-count-down>
			</view>
		</view>

		<view class="" :style="{ height: `${gao}px` }" style="position: relative">
			<view class="" style="position: absolute; top: 0; width: 100%" :style="{ height: `${gao}px` }">
				<image src="/static/beitu.png" mode="" style="width: 100%; border-radius: 30rpx 30rpx 0 0" :style="{ height: `${gao}px` }"></image>
			</view>
			<view class="" style="position: absolute; bottom: 0; right: 0">
				<image src="/static/zhang.png" mode="" style="width: 374rpx; height: 640rpx"></image>
			</view>
			<view class="" style="position: absolute; bottom: 0; width: 100%; z-index: 2; background: #ebe4d7">
				<view class="" style="padding: 0 25rpx">
					<view class="" style="background: #ffffff; border-radius: 55rpx; padding: 15rpx 30rpx">
						<view class="between" style="">
							<text style="font-weight: 400; font-size: 30rpx; color: #222222">全款：¥{{ money }}</text>
							<view class="center" style="width: 220rpx; height: 80rpx; background: #8c1608; border-radius: 40rpx" @click="zhi">
								<view class="" style="font-weight: 400; font-size: 30rpx; color: #ffffff">立即支付</view>
							</view>
						</view>
					</view>
					<view class="" style="margin-top: 40rpx">
						<u-checkbox-group v-model="checkboxValue1" shape="circle">
							<u-checkbox name="1"></u-checkbox>
							<text style="font-weight: 400; font-size: 24rpx; color: #888888">我已阅读并同意</text>
							<text style="font-weight: 400; font-size: 24rpx; color: #2970e2" @click="xieyi">《取消预定协议》</text>
						</u-checkbox-group>
					</view>
				</view>
			</view>
			<scroll-view scroll-y :style="{ height: `${gao}px` }">
				<view class="" style="position: relative; padding: 25rpx">
					<view class="" style="">
						<view class="" style="background: #ffffff; box-shadow: 0rpx 3rpx 13rpx 0rpx rgba(77, 77, 77, 0.15); border-radius: 10rpx; padding: 25rpx 30rpx">
							<view class="xun" v-for="(item, index) in shujv.clothesItem" :key="index">
								<view class="flex1">
									<image :src="img + item.text.clothes.image" mode="" style="width: 130rpx; height: 130rpx; border-radius: 10rpx"></image>
									<view class="column between1" style="margin-left: 23rpx">
										<view class="">
											<text style="font-weight: 400; font-size: 28rpx; color: #11130b">{{ item.text.clothes.title }}</text>
											<text v-if="item.text.is_package == 1">
												<text style="font-weight: 400; font-size: 24rpx; color: #8c1608; margin-left: 20rpx" v-if="item.has_adorn == 2">妆造</text>
												<text style="font-weight: 400; font-size: 24rpx; color: #8c1608; margin-left: 20rpx" v-if="item.has_photo == 2">摄影</text>
											</text>
											<text style="font-weight: 400; font-size: 24rpx; color: #8c1608; margin-left: 20rpx" v-if="item.text.is_package == 2">套餐</text>
										</view>
										<text style="font-weight: 400; font-size: 24rpx; color: #8c1608">×1</text>
									</view>
								</view>
								<view class="" style="padding: 20rpx 0">
									<u-line></u-line>
								</view>
							</view>
						</view>
					</view>

					<view class="" style="background: #ffffff; border-radius: 15rpx; padding: 40rpx 30rpx; margin-top: 20rpx">
						<view class="" style="font-weight: 400; font-size: 30rpx; color: #000000">支付明细</view>
						<view class="between" style="margin-top: 30rpx">
							<text style="font-weight: 400; font-size: 30rpx; color: #888888">总价小计</text>
							<text>¥{{ shujv.money }}</text>
						</view>
						<view class="between" style="margin-top: 30rpx">
							<text style="font-weight: 400; font-size: 30rpx; color: #888888">优惠券</text>
							<view class="flex" style="">
								<text v-if="clist.length <= 0">暂无</text>
								<text v-else @click="txvan = true">请选择</text>
								<image src="/pagesA/static/youj.png" mode="" style="width: 13rpx; height: 24rpx; padding-left: 20rpx"></image>
							</view>
						</view>
						<view class="between" style="margin-top: 30rpx">
							<text style="font-weight: 400; font-size: 30rpx; color: #888888">总计</text>
							<text>¥{{ money }}</text>
						</view>
					</view>
					<view class="" style="background: #ffffff; border-radius: 15rpx; padding: 40rpx 30rpx; margin-top: 20rpx">
						<view class="" style="font-weight: 400; font-size: 30rpx; color: #000000">预约信息</view>
						<view class="between" style="margin-top: 30rpx">
							<text class="shrink" style="font-weight: 400; font-size: 30rpx; color: #888888">联系人</text>
							<u--input placeholder="请填写联系人姓名" border="0" v-model="name" inputAlign="right"></u--input>
						</view>
						<view class="" style="padding-top: 20rpx">
							<u-line></u-line>
						</view>
						<view class="between" style="margin-top: 30rpx; position: relative">
							<button
								v-if="tel == ''"
								style="position: absolute; width: 100%; height: 100%; top: 0; opacity: 0; z-index: 9999"
								open-type="getPhoneNumber"
								@getphonenumber="getphonenumber"
							></button>

							<text class="shrink" style="font-weight: 400; font-size: 30rpx; color: #888888">联系人电话</text>
							<u--input placeholder="请填写联系人电话" border="0" v-model="tel" inputAlign="right"></u--input>
						</view>
					</view>
					<view class="" style="height: 180rpx"></view>
				</view>
			</scroll-view>
		</view>
		<u-modal :show="show" @cancel="show = false" @confirm="confirm" showCancelButton cancelText="取消" confirmText="确定">
			<view class="" style="width: 100%">
				<view class="center" style="font-weight: bold">提示</view>
				<view class="center" style="margin-top: 50rpx">您确定离开吗？离开后您所选中的服装库存量将自动解除选中</view>
			</view>
		</u-modal>
		<u-popup :show="txvan" @close="txvan = false" round="20rpx">
			<view class="" style="padding: 30rpx 0; box-sizing: border-box; overflow-y: scroll; height: 60vh">
				<u-radio-group v-model="radiovalue2" placement="column" activeColor="#F90906">
					<view class="" style="padding: 0 25rpx">
						<view class="xun" v-for="(item, index) in clist" :key="item.id">
							<view class="" style="margin-top: 20rpx; background: white">
								<view class="" style="display: flex">
									<view class="center column shrink" style="width: 190rpx; height: 180rpx; background: #fce5e5; border-radius: 20rpx 0 0 20rpx">
										<view class="" style="color: #e00000; font-weight: bold">
											<text style="font-size: 34rpx">¥</text>
											<text style="font-size: 60rpx">{{ Math.trunc(item.money) }}</text>
										</view>
										<view class="" style="font-weight: 400; font-size: 22rpx; color: #e00000">
											<text style="">满¥{{ Math.trunc(item.min) }}可用</text>
										</view>
									</view>
									<view class="" style="display: flex; justify-content: space-between; margin-left: 22rpx; align-items: center; width: 100%">
										<view class="" style="display: flex; flex-direction: column; justify-content: space-around; height: 178rpx">
											<view class="" style="font-weight: bold; font-size: 31rpx; color: #020202">{{ item.title }}</view>
											<view class="" style="font-weight: 400; font-size: 22rpx; color: #f90906">满{{ Math.trunc(item.min) }}可用</view>
											<view class="" style="font-weight: 500; font-size: 20rpx; color: #888888">{{ item.is_end == 2 ? '永久有效' : item.end_time }}</view>
										</view>
										<u-radio :name="item.id" @change="groupChange(item)"></u-radio>
									</view>
								</view>
								<view class="">
									<u-line></u-line>
								</view>
							</view>
						</view>
					</view>
				</u-radio-group>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { feastclothes_orderorderDetail, clothes_ordercancel, feastclothes_orderpay, commonpaydoPay, coupongetUseCoupon, commoncommongetMobile } from '../../untils/api.js';
export default {
	data() {
		return {
			gao: 0,
			checkboxValue1: [],
			id: '',
			shujv: {},
			time: 0,
			name: '',
			tel: '',
			coupon_id: '',
			show: false,
			clist: [],
			txvan: false,
			radiovalue2: '',
			money: 0
		};
	},
	onLoad(ops) {
		this.jisuan();
		this.id = ops.id;
		this.qfeastclothes_orderorderDetail();
		this.tel = this.state.tel;
	},
	onShow() {},
	methods: {
		async getphonenumber(e) {
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			console.log(e);
			const data = await commoncommongetMobile({
				code: e.detail.code
			});
			this.tel = data.data.tel;
		},
		xieyi() {
			uni.navigateTo({
				url: `/pagesB/xieyi/xieyi?zhi=${'cancel_order_adorn'}`
			});
		},
		groupChange(item) {
			this.money = Math.round((Number(this.shujv.money) - Number(item.money)) * 100) / 100;
			this.money = this.money <= 0 ? 0.01 : this.money;
			this.txvan = false;
		},
		async qcoupongetUseCoupon() {
			const data = await coupongetUseCoupon({
				money: this.shujv.money
			});
			this.clist = data.data;
		},
		confirm() {
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			this.qclothes_ordercancel();
			this.show = false;
		},
		async zhi() {
			if (this.name == '') {
				uni.showToast({
					icon: 'none',
					title: '请填写姓名',
					duration: 2000
				});
				return;
			}
			if (this.tel == '') {
				uni.showToast({
					icon: 'none',
					title: '请填写手机号',
					duration: 2000
				});
				return;
			}
			if (this.checkboxValue1.length <= 0) {
				uni.showToast({
					icon: 'none',
					title: '请勾选协议',
					duration: 2000
				});
				return;
			}
			this.qfeastclothes_orderpay();
		},
		async qfeastclothes_orderpay() {
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			const data = await feastclothes_orderpay({
				name: this.name,
				tel: this.tel,
				coupon_id: this.radiovalue2,
				order_id: this.id
			});
			if (data.code == 1) {
				this.qcommonpaydoPay(data.data.pay_id);
			}
		},

		async qcommonpaydoPay(id) {
			uni.showLoading({
				title: '加载中',
				mask: true
			});

			const data = await commonpaydoPay({
				pay_id: id
			});
			const pay = data.data;
			uni.requestPayment({
				appId: pay.appId,
				provider: 'wxpay',
				timeStamp: pay.timeStamp,
				nonceStr: pay.nonceStr,
				package: pay.package,
				signType: pay.signType,
				paySign: pay.paySign,
				success: (res) => {
					console.log(res);
					uni.switchTab({
						url: '/pages/wodedingdan/wodedingdan'
					});
					uni.requestSubscribeMessage({
						tmplIds: ['a0oE_GPulf_4IvfjtTWW0MB3zYbG_ijN8zyteDFY2Xo','N-nvKGQkzEbQaHqWRunNtwRaUxC5siFLwCvvS2rEZ9s'],
						success(res) {
							console.log('success', res);
						},
						fail(err){
							console.log(err)
						}
					});
				},
				fail: (err) => {
					console.log(err);
				}
			});
		},
		jie() {
			this.qclothes_ordercancel();
		},
		async qclothes_ordercancel() {
			const data = await clothes_ordercancel({
				order_id: this.id
			});
			if (data.code == 1) {
				uni.showToast({
					icon: 'none',
					title: '订单已取消',
					duration: 2000
				});
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					});
				}, 1000);
			}
		},
		async qfeastclothes_orderorderDetail() {
			const data = await feastclothes_orderorderDetail({
				order_id: this.id
			});
			this.shujv = data.data;
			this.time = new Date(this.shujv.create_time).getTime() + 300000 - Date.now();
			console.log(this.time);
			this.jisuan();
			this.qcoupongetUseCoupon();
			this.money = this.shujv.money;
		},
		rightClick() {
			console.log('rightClick');
		},
		leftClick() {
			this.show = true;
		},
		scrolltolower() {
			console.log('到底了');
		},
		height(selector, callback) {
			uni.createSelectorQuery()
				.in(this) // 使用当前上下文
				.select(selector) // 选择器作为参数
				.boundingClientRect((res) => {
					if (res) {
						console.log(res.height); // 输出高度
						callback(res.height); // 调用回调函数
					} else {
						console.warn(`Element ${selector} not found`);
						callback(0); // 如果元素未找到，返回0或其他默认值
					}
				})
				.exec();
		},
		jisuan() {
			this.$nextTick(() => {
				const info = uni.getSystemInfoSync();
				const ke = info.windowHeight;
				const di = info.safeAreaInsets.bottom;
				let dao = null;
				let tab = null;
				setTimeout(() => {
					this.height('#ggo', (h) => {
						this.gao = ke - h - di;
					});
				});
			});
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .u-count-down__text {
	color: white !important;
}
.sl1 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-webkit-line-clamp: 1;
}
.sl2 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-webkit-line-clamp: 2;
}
.beijing {
	overflow: hidden;
	padding: 0 25rpx;
}
.beijing1 {
	min-height: 100vh;
	background-color: #f0e8dc;
	//系统tabbar不要加注释掉
	padding-bottom: env(safe-area-inset-bottom);
	box-sizing: border-box;
}
</style>
